<!--
 * @Description: file content
 * @Author: Zt2tzzt
 * @Date: 2021-09-30 11:28:34
 * @LastEditors: Zt2tzzt
 * @LastEditTime: 2021-09-30 14:15:11
 * @LastEditContent: 
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>

  <template id="my-app">
    <!-- 1.绑定textarea -->
    <label for="intro">
      自我介绍
      <textarea name="intro" id="intro" cols="30" rows="10" v-model="intro"></textarea>
    </label>
    <h2>intro: {{intro}}</h2>

    <!-- 2.checkbox -->
    <!-- 2.1. 单选框 -->
    <span>你的爱好:</span>
    <label for="basketball">
      <input type="checkbox" id="basketball" v-model="hobbies" value="basketball"> 篮球
    </label>
    <label for="football">
      <input type="checkbox" id="football" v-model="hobbies" value="football"> 足球
    </label>
    <label for="tennis">
      <input type="checkbox" id="tennis" v-model="hobbies" value="tennis"> 网球
    </label>
    <h2>hobbies: {{hobbies}}</h2>

    <!-- 3.radio -->
    <span>你的爱好: </span>
    <label for="male">
      <input type="radio" id="male" v-model="gender" value="male"> 男
    </label>
    <label for="female">
      <input type="radio" id="female" v-model="gender" value="female"> 女
    </label>
    <h2>gender: {{gender}}</h2>

    <!-- 4.select -->
    <span>喜欢的水果:</span>
    <select v-model="fruits" multiple size="3">
      <option value="apple">苹果</option>
      <option value="orange">橘子</option>
      <option value="banana">香蕉</option>
    </select>
    <h2>fruits: {{fruits}}</h2>
  </template>

  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = {
      template: '#my-app',
      data() {
        return {
          intro: 'Hello World',
          hobbies: ['basketball'],
          gender: '',
          fruits: 'orange'
        }
      },
      watch: {
        
      },
      computed: {
        
      },
      methods: {
        
      }
    }
    Vue.createApp(app).mount('#app')
  </script>
</body>
</html>